<template>
  <div>
    <basic-dialog
      width="600px"
      title="选择可直送范围"
      :visible="visible"
      :handle-close="closeCategoryDialog"
      :handleOpened="initProps"
      :handleOk="handleOk"
    >
      <!-- <el-cascader-panel
        v-loading="loading"
        v-if="showPannel"
        ref="categoryPannel"
        v-model="categoryValue"
        :props="props"
        @change="handleNodeChange"
      ></el-cascader-panel> -->
      <div class="radioWrap">
        <el-radio v-model="radio" label="1">全国</el-radio>
        <el-radio v-model="radio" label="2">区域</el-radio>
      </div>
      <el-cascader-panel
        v-if="radio == 2"
        ref="areaPannel"
        v-model="areaValue"
        :props="panelProps"
        :options="options"
        @change="handleNodeChange"
      ></el-cascader-panel>
    </basic-dialog>
  </div>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import {
  queryAllProvinceAndCityService
} from '@/api/sourcing/public';

export default {
  // 选择主营品类
  name: 'MainCategorySelect',
  components: {
    BasicDialog
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    inquirySkuList: {
      type: Array
    }
  },
  data () {
    return {
      areaValue: {'101': ['1001', '1002'], '102': ['1001', '1002']},
      radio: false,
      searchLoading: false,
      submitLoading: false,
      showPannel: true,
      loading: false,
      categoryValue: '',
      props: {
        lazy: true,
        multiple: true
      },
      formData: {
        categoryName: '',
        categoryNo: '',
      },
      searchList: { // 查询列表
        dataSource: [], // 数据源
        checkedCate: '', // 勾选对象
      },
      selectCategoryInfo: {},
      options: [
        {
          id: '101',
          code: '101',
          name: '河北',
          children: [
            {
              id: '1001',
              code: '1001',
              name: '石家庄'
            }, {
              id: '1002',
              code: '1002',
              name: '廊坊'
            }, {
              id: '1003',
              code: '1003',
              name: '沧州'
            }
          ]
        }, {
          id: '102',
          code: '102',
          name: '河南',
          children: [
            {
              id: '1004',
              code: '1004',
              name: '郑州'
            }, {
              id: '1005',
              code: '1005',
              name: '洛阳'
            }
          ]
        }
      ],
      panelProps: {
        multiple: true,
        label: 'name',
        value: 'code',
        id: 'id'
      }
    };
  },
  created () {
    // this.initProps();
  },
  methods: {
    handleOk () {
      const cityCodeList = this.areaValue.map(item => item[1])
      console.log(cityCodeList)
    },
    // 初始化lazyLoad方法
    initProps () {
      this.showPannel = true;
      this.props.lazyLoad = async (node, resolve) => {
        console.log(node)
        const { data, level } = node
        const { code } = data || {}
        const params = {
          addressLevel: level == 0 ? '101' : '102',
          parentAddressCode: code || 0
        }
        this.getAreaTreeList(params).then(res => {
          const nodes = this.getFormatTreeNodes(level, res)
          console.log(nodes)
          resolve(nodes)
        })
      };
    },
    // 条件查询选择
    handleCheckSearchList (id) {
      this.selectCategoryInfo = this.searchList.dataSource.find(item => item.categoryUuid == id)
      if (this.$refs['categoryPannel']) {
        this.$refs['categoryPannel'].clearCheckedNodes();
      }
    },
    // 获取格式化后的分类树节点数据集合
    getFormatTreeNodes (level, nodes = []) {
      const formatNodes = nodes.map(item => ({
        value: item.addressId,
        label: item.addressName,
        code: item.addressCode,
        addressLevel: item.addressLevel,
        leaf: level >= 1,
        level: level + 1
      }))
      return formatNodes
    },
    // 获取区域树
    async getAreaTreeList ({ addressLevel, parentAddressCode }) {
      const data = {
        addressLevel,
        parentAddressCode,
      }
      const loadingFn = state => { this.loading = state }
      const res = await queryAllProvinceAndCityService(data, loadingFn)
      return res?.data.data ?? []
    },
    // 选择末级分类
    handleNodeChange (val) {
      console.log(this.areaValue)
      console.log(val)
      const selectNode = this.$refs['areaPannel'].getCheckedNodes();
      if (selectNode) {
        console.log(selectNode)
      }
    },
    // 清空已选分类
    clearCategoryNodes () {
      if (this.$refs.categoryPannel) {
        this.$refs.categoryPannel.clearCheckedNodes();
      }
      if (this.$refs.formData) {
        this.$refs.formData.resetFields();
      }
      this.searchList = {
        dataSource: [],
        checkedCate: ''
      }
    },
    // 关闭弹框
    closeCategoryDialog () {
      this.$emit('update:visible', false)
    },
    handleClear () {
      this.clearCategoryNodes()
      this.$emit('onSelected', null)
    },
  }
};
</script>
<style lang="less" scoped>
  /deep/.el-scrollbar__wrap {
    overflow-x: hidden;
    height: 100%;
  }
  .radioWrap {
    margin-bottom: 10px;
  }
  /deep/ .el-cascader-menu {
    width: 50%;
    min-height: 200px;
  }
</style>
